<template>
  <div class="about">
    <div class="img">
      <img :src="songImg" alt="">
    </div>
      <div class="wrapper" ref="wrapper">
        <div class="content">
          <ul>
            <li class="loading-wrappe" v-for="item in secondinfo" :key="item.id" @click="selectPlayList(item)">
              <div class="text">
                <div class="ddd">
                  <span class="bangdanname">{{item.name}}-{{item.description}}</span>
                </div>
                <span class="bandansong" v-for="(qiansansong,id) in item.tracks" :key="qiansansong.first">0{{id+1}}、{{qiansansong.first}}-{{qiansansong.second}}</span>
              </div>
              <div class="songinfo">
                <span>{{item.playCount/10000|numFilter(1)}}万</span>
                <img :src="item.coverImgUrl" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data(){
    return{
      songImg:'',
      songinfoData:[],
      secondinfo:[],
    };
  },
  methods:{
    getPlaylistHot(){
      axios.get("/api/toplist")
      .then(res => {
        console.log(res.data);
        console.log(res.data.list);
        this.songImg = res.data.artistToplist.coverUrl;
        this.songinfoData = res.data.list
      })
      .catch(err => {
        console.error(err); 
      })
    },
    getSecondinfo(){
      axios.get("/api/toplist/detail")
      .then(res => {
        console.log(res.data);
        console.log(res.data.list);
        this.secondinfo=res.data.list;
      })
      .catch(err => {
        console.error(err); 
      })
    },
    selectPlayList(item){
      const clickrankid = item.id//这里的item后面的值是拉取数据里面的真实数据
      console.log("---------"+clickrankid)
      this.$router.push({//路由管理器必须要加r
        name:'ClickAbout',
        //有多个参数时
        params:{id:clickrankid},
        //只有一个参数时
        // params:{playlistid},
      })
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
    },
    
  },
  mounted() {
    this.getPlaylistHot();
    this.getSecondinfo();
  },
  filters:{
    numFilter(value,num){
      return  parseFloat(value).toFixed(num);
      }
    },
}
</script>

<style scoped>
.img > img{
  width: 100%;
  height: 180px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.songinfo > img{
  width: 170px;
  height: 170px;
  border-radius: 25px;
}
ul li {
  display: inline-block;
  width: 100%;
  height: 180px;
  /* box-shadow: 5px 5px 5px red; */
  position: flex/*父元素常见属性*/
  /*设置主轴的方向*/
  /*flex-direction：  row行,column列*/
  /*设置主轴上的子元素排列方式*/
  /*justify-content： space-around平分,space-between两边贴中间平分,space-evenly每个间距相同*/
  /*设置子元素是否换行*/
  /*flex-wrap：wrap/nowrap*/
  /*设置侧轴上的子元素排列方式（单行）*/
  /*align-items：stretch 拉伸*/
  /*设置侧轴上的子元素的排列方式（多行）*/
  /*align-content：stretch 子元素高度平分父元素高度*/
  /*flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap*/
  /*子元素常见属性*/
  /*align-self 子元素自己在侧轴的排列方式*/
  /*order 属性定义子项的排列顺序(前后顺序) */;
}
.text{
  height: 100%;
  width: 50%;
  flex: 1;
  float: left;
}
.songinfo{
  height: 100%;
  width: 50%;
  flex: 1;
  float: right;
}
.songinfo > span{
  background-color: rgba(128, 128, 128, 0.3);
    /* 字体透明 */
    /* background: color;
    color: rgba(128, 128, 128,0.2); */
    position: absolute;/**绝对定位，在一个盒子的右下角，还需要设置相对定位 */
    right: 2rem;
    font-size: 5px;
    color: white;
    box-sizing: border-box;
    border-radius: 15px;
    text-align: right;
    width: 60px;
}
.bandansong{
  display: block;
  text-align: left;
  /* box-shadow: 5px 5px 5px red; */
  width: 100%;
  height: 30px;
  overflow: hidden; 
  text-overflow: ellipsis; 
  -o-text-overflow: ellipsis;
  white-space:nowrap;
  color: grey;
}
.bangdanname{
  text-align: left;
  font-weight: bold;
}
.ddd{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 100%;
  /* box-shadow: 5px 5px 5px red; */
  height:66px;
}
</style>
